

<template>
  <div>
    <el-card>
      <div style="margin-left:10px">
        <el-date-picker
            v-model="valueTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
<!--        <el-date-picker-->
<!--            v-model="startTime"-->
<!--            type="date"-->
<!--            placeholder="选择日期">-->
<!--        </el-date-picker>-->
<!--        - -->
<!--        <el-date-picker-->
<!--            v-model="endTime"-->
<!--            type="date"-->
<!--            placeholder="选择日期">-->
<!--        </el-date-picker>-->
        <!-- <i class="el-icon-search"></i> -->
        <el-button type="primary" @click="searchByUserID" style="margin-left: 20px;">查询</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="commentsList" stripe style="width: 95%">
        <el-table-column label="编号" width="120" prop="id">
        </el-table-column>
        <el-table-column label="评论内容" width="120" prop="content">
        </el-table-column>
        <el-table-column label="评论时间" width="170" prop="publishTime">
        </el-table-column>
        <el-table-column label="评论人" width="170" prop="publishUsername">
        </el-table-column>
        <el-table-column label="景点" width="170" prop="sightName">
        </el-table-column>
        <el-table-column label="回复的评论" width="170" prop="answerId">
        </el-table-column>
        <el-table-column label="操作" width="350">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="detail(scope.row.id)">详情</el-button>
            <template>
              <el-popconfirm @confirm="deleteBtn(scope.row.id)" title="确定要删除？">
                <el-button style="margin-left:10px" slot="reference" class="deleteBtn" type="danger"
                           size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col :span="12" :offset="12">
          <el-pagination layout="total,prev, pager, next,jumper,sizes " background small prev-text="上一页"
                         next-text="下一页" :total="total" :page-size="pageSize" :current-page="pageNow"
                         :page-sizes="[5, 10, 50]" style="margin:15px 0px" @current-change="findPage"
                         @size-change="findSize">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog title="评论详情" :visible.sync="commentsDetailShow">
      <!-- <div>物资类型展示</div> -->
      <!-- <UserDetailVue></UserDetailVue>    -->
      <div>
        <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              评论人
            </template>
            {{ commentsDetail.publishUsername }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              景点
            </template>
            {{ commentsDetail.sightName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              评论时间
            </template>
            <el-tag size="small">{{ commentsDetail.publishTime }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              评论内容
            </template>
            {{ commentsDetail.content }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "myComments",
  data() {
    return {
      //添加表单
      addForm: {
        id:0
      },
      size: '',
      // 详情
      commentsDetailShow: false,
      // 部门下拉选择值的记录
      value: '',
      // startTime:0,
      // endTime:0,
      valueTime:'',
      searchByDept: "",
      pageNow: 1,
      pageSize: 5,
      total: 0,
      commentsDetail: {},
      deptOption: [
        {
          id: 1,
          name: '测试',
        },
        {
          id: 2,
          name: '开发',
        }
      ],
      commentsList: [
        {

        }
      ],
    };
  },

  mounted() {
    this.searchByUserID()
  },

  methods: {
    deleteBtn(id) {
      this.$http.delete("/comments/delete/" + id).then(res => {
        this.$message.success(res.data.data);
        this.searchByNameFun()
      });

      setTimeout(() => {
        this.searchByUserID();
      }, 1000);
    },

    //评论详情
    detail(id) {
      // console.log(value,id)
      this.$http.get("/comments/detail/" + id).then(res => {
        console.log(res.data)
        this.commentsDetail = res.data.data;
      });
      this.commentsDetailShow = true
    },


    // // 根据部门的关键字查询
    searchByUserID() {
      let uid = JSON.parse(window.sessionStorage.getItem("user")).id
      // 页面变动之后需要查询相同种类的变动页码的数据
      this.$http.get("/comments/listByUserId/" + this.pageNow + "/" + this.pageSize+ "?userId=" + uid + "&valueTime=" + this.valueTime )
          .then(res => {
            this.commentsList = res.data.data.records;
            this.total = res.data.data.total
          });

    },
    //改变页码数据量大小
    findSize(size) {
      this.pageSize = size
      this.searchByNameFun()
    },
    findPage(page) {

      this.pageNow = page
      this.searchByNameFun()

    }
  }
}
</script>

<style scoped>

</style>

